<template>
  <div class="records">
    <stable
      :columns="tableSetting.columns"
      :data="tableSetting.data"
      :toolbarConfigVisible="true"
      @refresh="getSanningList"
    ></stable>
    <vxe-pager
      v-model:currentPage="page.currentPage"
      v-model:pageSize="page.pageSize"
      :pageSizes="[50, 100, 200, 300, 400, 10000, 50000]"
      :total="page.total"
      @page-change="pageChange"
    >
    </vxe-pager>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";

interface PageChangeParams {
  pageSize: number;
  currentPage: number;
}

const props = defineProps({
  fourAspectRecordsClickRow: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

const { proxy } = useCurrentInstance();

// 分页配置
const page = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 200
});

const tableSetting = reactive({
  columns: [
    { field: "order", title: "流水号", width: "120px" },
    {
      field: "FourAspect_Pass",
      title: "是否通过",
      width: "120px",
      slots: {
        default: ({ row }: any) => {
          return row.FourAspect_Pass == 2 ? "是" : "否";
        }
      }
    },
    { field: "FourAspect_Tester", title: "检测人", width: "120px" },
    {
      field: "enable",
      title: "是否启用",
      width: "120px",
      slots: {
        default: ({ row }: any) => {
          return row.enable ? "是" : "否";
        }
      }
    },
    { field: "FourAspect_stages", title: "阶段", width: "120px" },
    { field: "FourAspect_Class", title: "四性", width: "120px" },
    { field: "Small_Class", title: "小类", width: "120px" },
    { field: "code", title: "编号", width: "120px" },
    { field: "Verification_Item", title: "检测项目", width: "120px" },
    { field: "Verification_Purpose", title: "检测目的", width: "120px" },
    { field: "Verification_Target", title: "检测对象", width: "120px" },
    { field: "Verification_Basis_Method", title: "检测依据和方法", width: "120px" },
    {
      field: "Is_Manual_Processing",
      title: "是否人工",
      width: "120px",
      slots: {
        default: ({ row }: any) => {
          return row.Is_Manual_Processing ? "是" : "否";
        }
      }
    },
    { field: "Create_DateTime", title: "创建日期", width: "145px" },
    { field: "Condition_Item", title: "条件项", width: "120px" },
    { field: "Operator", title: "操作符", width: "120px" },
    { field: "Match_Item", title: "匹配项", width: "120px" },
    { field: "FourAspect_DateTime", title: "检测日期", width: "120px" },
    { field: "Recod_ID", title: "Recod_ID", width: "120px" },
    { field: "FAC_ID", title: "对应配制的ID", width: "120px" },
    { field: "Remark", title: "备注", width: "120px" }
  ],
  data: []
});

// 获取检测记录
const getSanningList = () => {
  page.currentPage = 1;
  proxy.$vueAxios
    .post(
      "/Master_Base_FourAspect/GetConditional",
      {
        pageIndex: page.currentPage,
        pageSize: page.pageSize,
        order: "Create_DateTime desc",
        dtoList: [
          {
            fieldName: "Recod_ID",
            fieldValue: props.fourAspectRecordsClickRow.Record_ID,
            conditionalType: 0
          }
        ]
      }
      // { noLoading: true }
    )
    .then((res: any) => {
      if (res.Mark) {
        res.List.forEach((item: any, index: number) => {
          item.order = index + 1;
        });
        tableSetting.data = res.List;
        page.total = res.Count;
      }
    });
};

// 分页调用
const pageChange = ({ pageSize, currentPage }: PageChangeParams) => {
  page.currentPage = currentPage;
  page.pageSize = pageSize;
  getSanningList();
};

onMounted(() => {
  getSanningList();
});
</script>

<style lang="scss" scoped>
.records {
  height: calc(100% - 40px);
  .vxe-grid {
    :deep(.vxe-grid--toolbar-wrapper) {
      height: auto;
    }
  }
}
</style>
